<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="welcome-header">
          <h1>欢迎使用运销系统</h1>
          <p class="subtitle">一体化企业管理解决方案，助力企业数字化转型</p>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="stats-section">
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon bg-primary">
            <i class="el-icon-user"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">1,234</div>
            <div class="stat-label">员工数量</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon bg-success">
            <i class="el-icon-document"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">568</div>
            <div class="stat-label">待处理订单</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon bg-warning">
            <i class="el-icon-shopping-cart-full"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">¥245K</div>
            <div class="stat-label">本月销售额</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6">
        <div class="stat-card">
          <div class="stat-icon bg-danger">
            <i class="el-icon-bank-card"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">98%</div>
            <div class="stat-label">系统可用性</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="main-content">
      <el-col :sm="24" :md="16">
        <el-card class="quick-access">
          <div slot="header" class="clearfix">
            <span>快捷操作</span>
          </div>
          <div class="quick-links">
            <el-row :gutter="15">
              <el-col :span="6" v-for="(item, index) in quickActions" :key="indexold">
                <div class="quick-link-item" @click="handleQuickAction(item.path)">
                  <div class="link-icon" :class="item.color">
                    <i :class="item.icon"></i>
                  </div>
                  <div class="link-text">{{ item.title }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="system-notice">
          <div slot="header" class="clearfix">
            <span>系统公告</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看更多</el-button>
          </div>
          <div class="notice-list">
            <div class="notice-item" v-for="(notice, index) in notices" :key="indexold">
              <div class="notice-title">{{ notice.title }}</div>
              <div class="notice-time">{{ notice.time }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :sm="24" :md="8">
        <el-card class="system-info">
          <div slot="header" class="clearfix">
            <span>系统信息</span>
          </div>
          <div class="info-content">
            <ul>
              <li><span class="info-label">系统名称：</span><span>企业资源规划系统</span></li>
              <li><span class="info-label">当前版本：</span><span>v{{ version }}</span></li>
              <li><span class="info-label">授权用户：</span><span>企业版</span></li>
              <li><span class="info-label">技术支持：</span><span>技术部</span></li>
              <li><span class="info-label">服务热线：</span><span>11223344</span></li>
            </ul>
          </div>
        </el-card>

<!--        <el-card class="user-guide">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span>使用指南</span>-->
<!--          </div>-->
<!--          <div class="guide-content">-->
<!--            <div class="guide-step" v-for="(step, index) in userGuide" :key="indexold">-->
<!--              <div class="step-number">{{ indexold + 1 }}</div>-->
<!--              <div class="step-content">-->
<!--                <div class="step-title">{{ step.title }}</div>-->
<!--                <div class="step-desc">{{ step.desc }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->
      </el-col>
    </el-row>

    <el-row :gutter="20" class="modules-section">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>功能模块</span>
          </div>
          <div class="modules-container">
            <el-row :gutter="20">
              <el-col :xs="12" :sm="6" v-for="(module, index) in modules" :key="indexold">
                <div class="module-item">
                  <div class="module-icon" :class="module.color">
                    <i :class="module.icon"></i>
                  </div>
                  <div class="module-name">{{ module.name }}</div>
                  <div class="module-desc">{{ module.desc }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.9.0",
      // 快捷操作
      quickActions: [
        { title: "查看销售运单", icon: "el-icon-plus", color: "bg-primary", path: "waybill/waybills" },
        { title: "查看商品", icon: "el-icon-user", color: "bg-success", path: "baseData/goodss" },
        { title: "库存查询", icon: "el-icon-search", color: "bg-warning", path: "/inventory/list" },
        { title: "财务报表", icon: "el-icon-data-analysis", color: "bg-danger", path: "/finance/report" }
      ],
      // 系统公告
      notices: [
        { title: "系统升级通知：新功能上线", time: "2025-05-25" },
        { title: "五一假期系统维护安排", time: "2025-04-28" },
        { title: "关于数据安全的重要提醒", time: "2025-04-15" },
        { title: "新员工系统使用培训安排", time: "2025-04-10" }
      ],
      // 使用指南
      userGuide: [
        { title: "账户设置", desc: "完善个人信息和安全设置" },
        { title: "功能导航", desc: "了解各模块功能和操作流程" },
        { title: "数据录入", desc: "掌握正确的数据录入方法" },
        { title: "报表查看", desc: "学会查看和导出各类报表" }
      ],
      // 功能模块
      modules: [
        { name: "销售管理", icon: "el-icon-shopping-cart-full", color: "bg-primary", desc: "订单、客户、报价管理" },
        { name: "采购管理", icon: "el-icon-shopping-cart-2", color: "bg-success", desc: "供应商、采购订单管理" },
        { name: "库存管理", icon: "el-icon-box", color: "bg-warning", desc: "出入库、盘点、调拨" },
        { name: "财务管理", icon: "el-icon-bank-card", color: "bg-danger", desc: "应收应付、收支明细" },
        { name: "生产管理", icon: "el-icon-office-building", color: "bg-primary", desc: "生产计划、工艺流程" },
        { name: "人力资源", icon: "el-icon-user", color: "bg-success", desc: "员工档案、考勤薪资" },
        { name: "报表中心", icon: "el-icon-data-analysis", color: "bg-warning", desc: "各类业务数据统计" },
        { name: "系统设置", icon: "el-icon-setting", color: "bg-danger", desc: "权限、参数、基础资料" }
      ]
    }
  },
  methods: {
    handleQuickAction(path) {
      // 处理快捷操作点击事件
      this.$router.push(path);
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background-color: #f5f7f9;

  .welcome-header {
    text-align: center;
    padding: 30px 0;
    background: white;
    border-radius: 4px;
    margin-bottom: 20px;

    h1 {
      font-size: 28px;
      color: #333;
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 16px;
      color: #666;
    }
  }

  .stats-section {
    margin-bottom: 20px;

    .stat-card {
      display: flex;
      background: white;
      border-radius: 4px;
      padding: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        i {
          font-size: 24px;
          color: white;
        }
      }

      .stat-content {
        flex: 1;

        .stat-number {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .stat-label {
          color: #999;
          font-size: 14px;
        }
      }
    }
  }

  .main-content {
    margin-bottom: 20px;

    .quick-access {
      margin-bottom: 20px;

      .quick-links {
        .quick-link-item {
          text-align: center;
          padding: 20px 10px;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

          .link-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;

            i {
              font-size: 20px;
              color: white;
            }
          }

          .link-text {
            font-size: 14px;
            color: #333;
          }
        }
      }
    }

    .system-notice {
      .notice-list {
        .notice-item {
          padding: 12px 0;
          border-bottom: 1px solid #eee;

          &:last-child {
            border-bottom: none;
          }

          .notice-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
          }

          .notice-time {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }

    .system-info {
      margin-bottom: 20px;

      .info-content {
        ul {
          list-style: none;
          padding: 0;

          li {
            padding: 8px 0;
            display: flex;
            border-bottom: 1px solid #eee;

            &:last-child {
              border-bottom: none;
            }

            .info-label {
              width: 90px;
              color: #999;
            }

            span:last-child {
              flex: 1;
              color: #333;
            }
          }
        }
      }
    }

    .user-guide {
      .guide-content {
        .guide-step {
          display: flex;
          padding: 15px 0;
          border-bottom: 1px solid #eee;

          &:last-child {
            border-bottom: none;
          }

          .step-number {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #409EFF;
            color: white;
            text-align: center;
            line-height: 24px;
            font-size: 14px;
            margin-right: 15px;
            flex-shrink: 0;
          }

          .step-content {
            .step-title {
              font-weight: bold;
              margin-bottom: 5px;
              color: #333;
            }

            .step-desc {
              font-size: 13px;
              color: #666;
            }
          }
        }
      }
    }
  }

  .modules-section {
    .modules-container {
      .module-item {
        text-align: center;
        padding: 20px 10px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .module-icon {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 15px;

          i {
            font-size: 24px;
            color: white;
          }
        }

        .module-name {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 5px;
          color: #333;
        }

        .module-desc {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  // 背景色类
  .bg-primary {
    background: #409EFF;
  }

  .bg-success {
    background: #67C23A;
  }

  .bg-warning {
    background: #E6A23C;
  }

  .bg-danger {
    background: #F56C6C;
  }
}
</style>
